<template>
	<view>
		<view class="status_bar" :style="{height:barHeight + 'px',width:'100%'}"></view>
		<view style="height: 80rpx;text-align: center;border-bottom: 1px dashed #ccc;line-height: 80rpx;">
			实时数据
		</view>
		<view class="VerticalBox">
			<scroll-view class="VerticalNav nav" scroll-y scroll-with-animation :scroll-top="verticalNavTop" style="height:calc(100vh - 200upx)">
				<view class="cu-item" :class="item.id==tabCur?'text-green cur':''" v-for="item in equipments" :key="item.id" @tap="TabSelect"
				 :data-id="item.id">
					{{item.name}}
				</view>
			</scroll-view>
			<scroll-view class="VerticalMain" scroll-y scroll-with-animation style="height:calc(100vh - 200upx)"
			 :scroll-into-view="'main-'+mainCur" @scroll="VerticalMain">
				<view class="padding-top padding-lr" v-for="item in equipments" :key="item.id" :id="'main-'+item.id">
					<view class="cu-bar solid-bottom bg-white">
						<view class="action">
							<text class="cuIcon-title text-green"></text> {{item.name}}</view>
					</view>
					<view class="cu-list menu-avatar">
						<view class="cu-item" v-for="ite in item.datas" :key="ite.id">
							<view class="content">
								<view class="text-grey">{{ite.name}}</view>
								<view class="text-gray text-sm flex">
									<text class="text-cut">
										{{ite.fetchTime}}
									</text> </view>
							</view>
							<view class="action">
								<view class="text-grey text-xs" style="font-weight: bold;color: black;font-size: 20rpx">{{ite.curData}}</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				tabCur: 0,
				mainCur: 0,
				verticalNavTop: 0,
				load: true,
				barHeight:0,
				equipments:[{
					id:1,
					name:'人体红外',
					datas:[{
						id:1,
						curData:'15',
						name:'红外状态',
						fetchTime:'2021-04-02 17:19:29'
					},{
						id:2,
						curData:'16',
						name:'红外状态1',
						fetchTime:'2021-04-03 17:19:29'
					},{
						id:3,
						curData:'17',
						name:'红外状态2',
						fetchTime:'2021-04-04 17:19:29'
					},{
						id:4,
						curData:'18',
						name:'红外状态3',
						fetchTime:'2021-04-05 17:19:29'
					}]
				},{
					id:2,
					name:'测试设备1',
					datas:[{
						id:1,
						curData:'15',
						name:'红外状态',
						fetchTime:'2021-04-02 17:19:29'
					},{
						id:2,
						curData:'16',
						name:'红外状态1',
						fetchTime:'2021-04-03 17:19:29'
					},{
						id:3,
						curData:'17',
						name:'红外状态2',
						fetchTime:'2021-04-04 17:19:29'
					},{
						id:4,
						curData:'18',
						name:'红外状态3',
						fetchTime:'2021-04-05 17:19:29'
					}]
				},{
					id:3,
					name:'测试设备2',
					datas:[{
						id:1,
						curData:'15',
						name:'红外状态',
						fetchTime:'2021-04-02 17:19:29'
					},{
						id:2,
						curData:'16',
						name:'红外状态1',
						fetchTime:'2021-04-03 17:19:29'
					},{
						id:3,
						curData:'17',
						name:'红外状态2',
						fetchTime:'2021-04-04 17:19:29'
					},{
						id:4,
						curData:'18',
						name:'红外状态3',
						fetchTime:'2021-04-05 17:19:29'
					}]
				},{
					id:4,
					name:'测试设备2',
					datas:[{
						id:1,
						curData:'15',
						name:'红外状态',
						fetchTime:'2021-04-02 17:19:29'
					},{
						id:2,
						curData:'16',
						name:'红外状态1',
						fetchTime:'2021-04-03 17:19:29'
					},{
						id:3,
						curData:'17',
						name:'红外状态2',
						fetchTime:'2021-04-04 17:19:29'
					},{
						id:4,
						curData:'18',
						name:'红外状态3',
						fetchTime:'2021-04-05 17:19:29'
					}]
				}]
			};
		},
		mounted() {
				let info = uni.getSystemInfoSync()
				this.barHeight = info.statusBarHeight
		},
		methods: {
			TabSelect(e) {
				this.tabCur = e.currentTarget.dataset.id;
				this.mainCur = e.currentTarget.dataset.id;
				this.verticalNavTop = (e.currentTarget.dataset.id - 1) * 50
			},
			VerticalMain(e) {
				// #ifdef MP-ALIPAY
				   return false  //支付宝小程序暂时不支持双向联动
				// #endif
				let that = this;
				let tabHeight = 0;
				if (this.load) {
					for (let i = 0; i < this.list.length; i++) {
						let view = uni.createSelectorQuery().select("#main-" + this.list[i].id);
						view.fields({
							size: true
						}, data => {
							this.list[i].top = tabHeight;
							tabHeight = tabHeight + data.height;
							this.list[i].bottom = tabHeight;
						}).exec();
					}
					this.load = false
				}
				let scrollTop = e.detail.scrollTop + 10;
				for (let i = 0; i < this.list.length; i++) {
					if (scrollTop > this.list[i].top && scrollTop < this.list[i].bottom) {
						this.verticalNavTop = (this.list[i].id - 1) * 50
						this.tabCur = this.list[i].id
						console.log(scrollTop)
						return false
					}
				}
			}
		},
	}
</script>

<style>
	.fixed {
		position: fixed;
		z-index: 99;
	}

	.VerticalNav.nav {
		width: 200upx;
		white-space: initial;
	}

	.VerticalNav.nav .cu-item {
		width: 100%;
		text-align: center;
		background-color: #fff;
		margin: 0;
		border: none;
		height: 50px;
		position: relative;
	}

	.VerticalNav.nav .cu-item.cur {
		background-color: #f1f1f1;
	}

	.VerticalNav.nav .cu-item.cur::after {
		content: "";
		width: 8upx;
		height: 30upx;
		border-radius: 10upx 0 0 10upx;
		position: absolute;
		background-color: currentColor;
		top: 0;
		right: 0upx;
		bottom: 0;
		margin: auto;
	}

	.VerticalBox {
		display: flex;
	}

	.VerticalMain {
		background-color: #f1f1f1;
		flex: 1;
	}
	.cu-list.menu-avatar>.cu-item .content{
		left: 30rpx;
		width: calc(100% - 96upx - 30upx);
	}
</style>
